<template>
  <div class="flexLeft">
    <div class="flexLeftSon4" style="flex: 4">
      <div class="flexLeftSon5">
        <img src="src/assets/images/canvsimage/1.png" class="img1" />
        <div class="sonFlex">
          <p class="endVal">
            <count-to
              :startVal="0"
              :endVal="nameData.endVal"
              :decimals="0"
              :duration="3000"
            >
            </count-to>
          </p>
          <div class="sonFlexSon1">
            <p class="title">国家会员</p>
            <p class="unit">万</p>
          </div>
        </div>
      </div>
      <div class="flexLeftSon5">
        <img src="src/assets/images/canvsimage/2.png" class="img2 img3" />
        <div>
          <p class="endVal">
            <count-to
              :startVal="0"
              :endVal="nameData1.endVal"
              :decimals="0"
              :duration="3000"
            >
            </count-to>
          </p>
          <div class="sonFlexSon1">
            <p class="title">平均消费</p>
            <p class="unit">美元</p>
          </div>
        </div>
      </div>
      <div class="flexLeftSon5">
        <img src="src/assets/images/canvsimage/3.png" class="img2 img3" />
        <div>
          <p class="endVal">
            <count-to
              :startVal="0"
              :endVal="nameData2.endVal"
              :decimals="0"
              :duration="3000"
            >
            </count-to>
          </p>
          <div class="sonFlexSon1">
            <p class="title">新会员</p>
            <p class="unit">个</p>
          </div>
        </div>
      </div>
    </div>

    <div class="flexLeftSon4" style="margin-top: 28px; flex: 3">
      <div class="flexLeftSon5">
        <img src="src/assets/images/canvsimage/2.png" class="img2" />
        <div>
          <p class="endVal">
            <count-to
              :startVal="0"
              :endVal="nameData3.endVal"
              :decimals="2"
              :duration="3000"
            >
            </count-to>
          </p>
          <div class="sonFlexSon1">
            <p class="title">购货人数</p>
            <p class="unit">个</p>
          </div>
        </div>
      </div>
      <div class="flexLeftSon5">
        <img src="src/assets/images/canvsimage/2.png" class="img2" />
        <div>
          <p class="endVal">
            <count-to
              :startVal="0"
              :endVal="nameData4.endVal"
              :decimals="2"
              :duration="3000"
            >
            </count-to>
          </p>
          <div class="sonFlexSon1">
            <p class="title">有效会员</p>
            <p class="unit">万</p>
          </div>
        </div>
      </div>
      <div class="flexLeftSon5">
        <img src="src/assets/images/canvsimage/3.png" class="img2" />
        <div>
          <p class="endVal">
            <count-to
              :startVal="0"
              :endVal="nameData5.endVal"
              :decimals="0"
              :duration="3000"
            >
            </count-to>
          </p>
          <div class="sonFlexSon1">
            <p class="title">活跃会员</p>
            <p class="unit">万</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CountTo } from 'vue3-count-to'
import { reactive } from 'vue'
const components = {
  CountTo,
}
const nameData = reactive({
  startVal: 0,
  endVal: 676887,
})
const nameData1 = reactive({
  startVal: 0,
  endVal: 15952,
})
const nameData2 = reactive({
  startVal: 0,
  endVal: 23,
})
const nameData3 = reactive({
  startVal: 0,
  endVal: 456.98,
})
const nameData4 = reactive({
  startVal: 0,
  endVal: 456.98,
})
const nameData5 = reactive({
  startVal: 0,
  endVal: 99,
})
</script>

<style lang="scss" scoped>
.flexLeft {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .flexLeftSon4 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;

    .flexLeftSon5 {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .sonFlex {
        margin-top: 20px;
      }
      .img1 {
        width: 117px;
        height: 90px;
      }
      .img2 {
        width: 61px;
        height: 61px;
      }
      .img3 {
        margin-left: 55px;
      }
      .endVal {
        color: #5df5f3;
        font-size: 23px;
        margin-bottom: 8px;
      }
      .sonFlexSon1 {
        display: flex;
        .title {
          font-size: 15px;
          color: #ffffff;
        }
        .unit {
          font-size: 12px;
          color: #5df5f3;
          margin-left: 3px;
        }
      }
    }
  }
}
</style>
